<template>
    <div>
        <el-row class="tac">
            <el-table :data="pageData" :header-cell-style="{ color: '#595959' }" class="tableBottom">
                <el-table-column prop="ProductName" label="产品名称" width="250" />
                <el-table-column prop="ProductModel" label="产品型号" />
                <el-table-column prop="DeviceName" label="设备名称"  width="250" />
                <el-table-column prop="DeviceSerialNo" label="设备序列号" />
                <el-table-column prop="TerminalName" label="终端名称" />
                <el-table-column prop="TerminalIdentity" label="终端标识符" />
                <el-table-column fixed="right" label="操作" align="center">
                    <template #default="{ row }">
                      <img src="../../assets/export.svg" alt="导出"  @click="handlerexportTerminal(row)" class="cursor">
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationstyle">
                <div class="circle"></div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" v-model:current-page="pageNo" :page-sizes="pagesSizes" :page-size=pageSize
                    layout="total,->,prev, pager, next,sizes, jumper" :total="total">
                </el-pagination>
            </div>
        </el-row>
    </div>
</template>
  
<script lang="ts" setup>
import { onMounted, ref, computed } from 'vue'
//用户登录相关的小仓库
import { useDevicesStore } from "@/stores/devices";
// 获取设备小仓库
const devicesStore = useDevicesStore();
const exportInfoValue = ref()
const pagesSizes = ref([15, 35, 50, 100])
const pageSize = ref(15)
const pageNo = ref(1)
const tableData = ref([])
const pageData = ref([])
const total = ref(0)
// 获取所有终端
const AllTerMinal = async () => {
    await devicesStore.allTerminal()
    await fun222()
}

// 从仓库中拿数据
const fun222 = () => {
    const allTerminalInfoValue: any = ref(computed(() => devicesStore.$state.allTerminalInfo));
    tableData.value = allTerminalInfoValue.value
    total.value = allTerminalInfoValue.value.length
    pageData.value = queryByPage()
}

const fun = () => {
    const exportInfo = ref(computed(() => devicesStore.$state.exportInfo));
    exportInfoValue.value = exportInfo
}

// 导出按钮的事件
const handlerexportTerminal = async (row: any) => {
    row.TerminalId && await devicesStore.exportTerminal(row.TerminalId)
    await fun()
    // 将对象内容转换为JSON字符串
    const jsonString = JSON.stringify(exportInfoValue.value?.value);
    // 创建Blob对象
    const blob = new Blob([jsonString], { type: 'application/json' });


    // 创建下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(blob);
    downloadLink.download = `${row.DeviceSerialNo}_${row.TerminalIdentity}.json`;

    // 模拟点击下载链接
    downloadLink.click();

    // 释放URL对象
    URL.revokeObjectURL(downloadLink.href);
}

// 实现分页的方法
const queryByPage = () => {
    // 起始位置 = (当前页 - 1) x 每页的大小
    const start = (pageNo.value - 1) * pageSize.value
    // 结束位置 = 当前页 x 每页的大小
    const end = pageNo.value * pageSize.value

    return tableData.value.slice(start, end)
}


const handleSizeChange = (msg: any) => {
    pageSize.value = msg

    pageData.value = queryByPage()
}
const handleCurrentChange = (msg: any) => {
    pageNo.value = msg
    pageData.value = queryByPage()
}
onMounted(() => {
    AllTerMinal()
})
</script>
  
<style scoped lang="less">
@media screen and (max-height: 1440px) {
    .tac {
        height: 1000px;
    }

    .tableBottom {
        width: 97%;
        margin-left: 30px;
        margin-top: 40px;
        height: 90%;
        .cursor:hover {
            cursor: pointer;
            }
    }


}

@media screen and (max-height: 1080px) {
    .tac {
        height: 760px;
    }

    .tableBottom {
        width: 97%;
        margin-left: 30px;
        margin-top: 40px;
        height: 87%;
    }

}

.active {
    color: #f2994a
}

.notactive {
    color: black
}

/*清除一级标题下方的边距*/
:deep(.el-menu-item-group__title) {
    padding: 0;
}

:deep(.el-col-4) {
    height: 1600px;
    border-right: 1px solid #dcdfe6;
}

/*列表的最小宽度*/
:deep(.el-menu-item) {
    min-width: 0;
}

/* 鼠标滑过 */
:deep(.el-menu--vertical .el-menu-item:hover) {
    background: #edebe8 !important;
}

:deep(.el-menu-item.is-active) {
    background: #fff9f0;
    border-right: 1px solid #f2994a;
    color: #f4a673;
}

:deep(.el-carousel__button) {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: cyan;
}

.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

:deep(.el-table .cell) {

    white-space: pre-line;
}

:deep(.el-pager li.is-active) {
    color: #f3a159;
    border: 1px solid #f3a159;
    border-radius: 4px;
}

:deep(.el-input) {
    --el-input-focus-border-color: #f3a159;
}

:deep(.el-pager li) {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

:deep(.el-pager li) {
    margin: 1px 4px
}

:depp(.el-pager+button.btn-next[type=button]) {
    border: 1px solid #d1d1d1;
    border-radius: 4px;
}

.paginationstyle {
    background: #ffffff;
    padding: 10px 20px 10px 30px;
    position: relative;
    width: 100%;

    .circle {
        width: 8px;
        height: 8px;
        background: #f3a159;
        border-radius: 50%;
        position: absolute;
        top: 25px;
        left: 20px;
    }
}
</style>
  